<!DOCTYPE html>
<html>
  
<head>
  <meta charset="utf-8">
  <meta name="author" content="饿包子" />
  
  
  <title>ReactNative 之开发配置 | 饿包子博客</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  
    <meta name="keywords" content="react-native," />
  

  
  <meta name="description" content="蚂蚁缘槐夸大国，蚍蜉撼树谈何易毛泽东 《满江红·和郭沫若同志》">

  
  
    <link rel="icon" href="/blog/images/xian.ico">
    <link rel="apple-touch-icon" href="/blog/images/Logo.png">
  

  
<link rel="stylesheet" href="/blog/css/Awesome.min.css">


  
<link rel="stylesheet" href="/blog/css/index.css">
<link rel="stylesheet" href="/blog/styles/components/highlight/highlight.css">


  
  
<script src="/blog/common/jquery.min.js"></script>

  
    
<script src="/blog/common/Av.min.js"></script>

  

  
    
<script src="/blog/common/MathJax.js"></script>

  

  
    
<script src="/blog/common/Valine.min.js"></script>

  

  

  <script>
  // theme-ad's config script
  // it can be used in every script
  
  window.AD_CONFIG = {
    leancloud: {"appid":"gE1EosDsVgB2slV4E92yPkcG-gzGzoHsz","appkey":"niR787UVTMyJQrR6gmOiJCKe","comment":true,"count":true},
    welcome: {"enable":false,"interval":30},
    start_time: "2018-06-10",
    passwords: ["a621ab606db2a11f63edc576a729843b8269250dc324206871d90635ac5e531c", ],
    is_post: true,
    lock: false,
    author: "饿包子",
    share: {"twitter":false,"facebook":false,"weibo":true,"qq":true,"wechat":false},
    mathjax: true,
    page_type: "",
    root: "/blog/"
  };
</script>

  
<script src="/blog/vendor/sha256.min.js"></script>
<script src="/blog/js/auth.js"></script>
<script src="/blog/js/index.js"></script>
<script src="/blog/vendor/qrcode.min.js"></script>


<meta name="generator" content="Hexo 5.4.2"></head>
  <body>
    <header class="site-header">
  <div class="site-header-brand">
    
      <span class="site-header-brand-title">
        <a href="/blog/">清风逐月</a>
      </span>
    
    
      <span class="site-header-brand-motto"> | 我思故我在</span>
    
  </div>
  <div class="site-header-right">
    <nav class="site-header-navigation">
      
        <a href="/blog/" target="_self">主页</a>
      
        <a href="/blog/archives/" target="_self">归档</a>
      
        <a href="/blog/tags/" target="_self">标签</a>
      
        <a href="/blog/categories/" target="_self">分类</a>
      
        <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">日记</a>
      
    </nav>
    <div class="site-header-btn">
      
        <a href="https://github.com/lixianbin1/" target="_blank" id="site-github">
          <i class="fa fa-github-alt"></i>
        </a>
      
      <a href="javascript:void(0);" id="site-search">
        <i class="fa fa-search"></i>
      </a>
      <a href="javascript:void(0);" id="site-nav-btn">
        <i class="fa fa-ellipsis-v"></i>
      </a>
    </div>
  </div>
</header>
<nav class="table-content" id="site-nav">
  <div class="table-content-title">
    <span>导航</span>
  </div>
  <div class="table-content-main">
    <ol class="toc">
      
        <li class="toc-item">
          <a href="/blog/" target="_self">
            主页
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/archives/" target="_self">
            归档
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/tags/" target="_self">
            标签
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/" target="_self">
            分类
          </a>
        </li>
      
        <li class="toc-item">
          <a href="/blog/categories/%E6%97%A5%E8%AE%B0" target="_self">
            日记
          </a>
        </li>
      
    </ol>
  </div>
</nav>
<div id="site-process"></div>
    <main>
      
  <div class="passage">
  <div class="passage-meta">
    <span>
      <i class="fa fa-calendar"></i>2020-11-19
    </span>
    
    
      <span>
        | <i class="fa fa-unlock-alt"></i>UNLOCK
      </span>
    
    <span>
       | <i class="fa fa-calendar"></i>更新时间:2020-12-7 16:14 
    </span>
  </div>
  <h1 class="passage-title">
    ReactNative 之开发配置
  </h1>
  
  <article class="passage-article">
    <h2 id="连接手机安装"><a href="#连接手机安装" class="headerlink" title="连接手机安装"></a>连接手机安装</h2><ul>
<li>打开手机 设置 &gt; 更多设置 &gt; 开发者选项 &gt; 开启USB调试,开启USB安装</li>
<li>打开CMD，执行 <code>adb reverse tcp:8081 tcp:8081</code></li>
<li>通过USB连接电脑，在授权确认后，选择同意后打开app</li>
<li>摇晃手机，呼出开发者菜单后，执行<code>Reload</code>（Reload JS）</li>
</ul>
<h2 id="连接手机调试"><a href="#连接手机调试" class="headerlink" title="连接手机调试"></a>连接手机调试</h2><p>默认情况下模拟器可以自动探测宿主机 ip 并连接，部分情况需要设置</p>
<h3 id="通过USB访问服务器"><a href="#通过USB访问服务器" class="headerlink" title="通过USB访问服务器"></a>通过USB访问服务器</h3><p>(Android 5.0 及以上)可以使用 adb reverse 命令</p>
<ul>
<li>adb reverse tcp:8081 tcp:8081</li>
</ul>
<h3 id="通过WIFI访问服务器"><a href="#通过WIFI访问服务器" class="headerlink" title="通过WIFI访问服务器"></a>通过WIFI访问服务器</h3><ul>
<li>确保电脑和手机在同一局域网下，（例如：同一WIF下或者电脑开热点），</li>
<li>查询PC端IP （打开 CMD，执行<code>ipconfig</code> 查看无线局域网WLAN 2的IP)</li>
<li>打开<code>开发APP</code>，摇晃手机呼出开发者菜单，点击<code>Settings</code>(Dev Settings) &gt; <code>Debug server host for device</code></li>
<li>设置为IP端口（例如：192.168.0.1:8081）,设置后在开发者菜单执行<code>Reload</code>（Reload JS）<br>正常情况应该没问题，如果出现报错，注意看报错内容</li>
</ul>
<h2 id="路由导航配置"><a href="#路由导航配置" class="headerlink" title="路由导航配置"></a>路由导航配置</h2><p>从0.44版本开始,navigator就被react native剥离了核心组件库，之后推荐使用<a target="_blank" rel="noopener" href="https://reactnavigation.org/docs">React Navigation</a> </p>
<blockquote>
<p>yarn add @react-navigation/native<br>  yarn add @react-navigation/stack<br>  yarn add @react-navigation/bottom-tabs<br>  yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view</p>
</blockquote>
<p>0.6版本 自动连接依赖库，0.6 以下请前往 ReactNavigation API 查看</p>
<p>在APP.js 或者 index.js 添加</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">import &#x27;react-native-gesture-handler&#x27;;</span><br><span class="line">import &#123;NavigationContainer&#125; from &#x27;@react-navigation/native&#x27;;</span><br><span class="line">import React from &#x27;react&#x27;;</span><br><span class="line"></span><br><span class="line">export default function App()&#123;</span><br><span class="line">  return(</span><br><span class="line">    &lt;NavigationContainer&gt;&#123;/* 你APP的其他代码 */&#125;&lt;/NavigationContainer&gt;</span><br><span class="line">  )</span><br><span class="line">&#125; </span><br></pre></td></tr></table></figure>
<h2 id="本地存储配置"><a href="#本地存储配置" class="headerlink" title="本地存储配置"></a>本地存储配置</h2><p>官方目前不推荐使用 AsyncStorage ，官方推荐使用<a target="_blank" rel="noopener" href="https://github.com/react-native-async-storage/async-storage">@react-native-community/async-storage</a> async-storage目前有分两个版本1.x和2.x ，默认是1.x</p>
<blockquote>
<p>yarn add @react-native-async-storage/async-storage</p>
</blockquote>
<p>0.6版本 自动连接依赖库，0.6 以下请前往 <a target="_blank" rel="noopener" href="https://react-native-async-storage.github.io/async-storage/docs/install/">async-storage</a> API 查看</p>
<p>在js中使用async-storage</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">import AsyncStorage from &#x27;@react-native-async-storage/async-storage&#x27;;</span><br><span class="line"></span><br><span class="line">// async-storage仅存储字符串，如要存储对象需要转为字符串，对象中如果有函数，函数会被stringify() 方法取消掉</span><br><span class="line">let str=JSON.stringify(&#123;&#x27;a&#x27;:1&#125;)</span><br><span class="line">AsyncStorage.setItem(&#x27;day&#x27;,str)</span><br><span class="line"></span><br><span class="line">//请求key为day的数据</span><br><span class="line">AsyncStorage.getItem(&#x27;day&#x27;).then((val)=&gt;&#123;</span><br><span class="line">  val != null ? JSON.parse(val) : null;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>还有一些其他方法，具体请查找<a target="_blank" rel="noopener" href="https://react-native-async-storage.github.io/async-storage/docs/api">API</a></p>
<h2 id="渲染HTML页面"><a href="#渲染HTML页面" class="headerlink" title="渲染HTML页面"></a>渲染HTML页面</h2><p>官方目前不推荐使用 WebView ，官方推荐<a target="_blank" rel="noopener" href="https://github.com/react-native-webview/react-native-webview">react-native-webview</a></p>
<blockquote>
<p>yarn add react-native-webview</p>
</blockquote>
<p>0.6版本 自动连接依赖库，0.6 以下请前往 <a target="_blank" rel="noopener" href="https://github.com/react-native-webview/react-native-webview/blob/master/docs/Getting-Started.md">react-native-webview</a> API 查看</p>
<p>在js中使用react-native-webview</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">import React, &#123; Component &#125; from &#x27;react&#x27;;</span><br><span class="line">import &#123; WebView &#125; from &#x27;react-native-webview&#x27;;</span><br><span class="line"></span><br><span class="line">// 远程网络页面</span><br><span class="line">const MyWeb1=()=&gt;&#123;</span><br><span class="line">  return(</span><br><span class="line">    &lt;WebView</span><br><span class="line">      source=&#123;&#123; uri: &#x27;https://infinite.red&#x27; &#125;&#125;</span><br><span class="line">      style=&#123;&#123; marginTop: 20 &#125;&#125;</span><br><span class="line">    /&gt;</span><br><span class="line">  )</span><br><span class="line">&#125;</span><br><span class="line">// html字符串代码</span><br><span class="line">const MyWeb2=()=&gt;&#123;</span><br><span class="line">  return(</span><br><span class="line">    &lt;WebView</span><br><span class="line">      originWhitelist=&#123;[&#x27;*&#x27;]&#125;</span><br><span class="line">      source=&#123;&#123; html: &#x27;&lt;h1&gt;Hello world&lt;/h1&gt;&#x27; &#125;&#125;</span><br><span class="line">    /&gt;</span><br><span class="line">  )</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="RN-的UI控件"><a href="#RN-的UI控件" class="headerlink" title="RN 的UI控件"></a>RN 的UI控件</h2><p>有时候一些常见的UI控件，可以使用第三方的控件集合来保证风格的统一性</p>
<blockquote>
<p>yarn add react-native-elements<br>  yarn add react-native-vector-icons</p>
</blockquote>
<p>0.6版本 自动连接依赖库，0.6 以下请前往 <a target="_blank" rel="noopener" href="https://reactnativeelements.com/docs/">reactnativeelements</a> API 查看</p>
<p>在js中使用组件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">import &#123; Button &#125; from &#x27;react-native-elements&#x27;;</span><br><span class="line"></span><br><span class="line">&lt;Button /&gt;;</span><br></pre></td></tr></table></figure>

<p>在此套UI组件中有很多组件，前往 <a target="_blank" rel="noopener" href="https://reactnativeelements.com/docs/">API</a> 查看</p>
<h2 id="开发中遇到的问题"><a href="#开发中遇到的问题" class="headerlink" title="开发中遇到的问题"></a>开发中遇到的问题</h2><h3 id="网络图片不显示"><a href="#网络图片不显示" class="headerlink" title="网络图片不显示"></a>网络图片不显示</h3><p>1 ： 在 Android 9以上的版本，默认是禁止一切不安全的请求，如http请求，如果图片是http请求就会白</p>
<ul>
<li>打开 <code>android\app\src\main</code> 目录下的 <code>AndroidManifest.xml</code> 添加以下代码</li>
</ul>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;application</span><br><span class="line">+    android:usesCleartextTraffic=&quot;true&quot;</span><br><span class="line"> ...</span><br><span class="line">&gt;</span><br></pre></td></tr></table></figure>

<p>2 : 在ReactNative中，默认是不支持SVG图片的，如果需要显示，需要引入react-native-svg</p>
<h3 id="FlatList-和SectionList-卡住"><a href="#FlatList-和SectionList-卡住" class="headerlink" title="FlatList 和SectionList 卡住"></a>FlatList 和SectionList 卡住</h3><p>当 <code>FlatList</code> 和 <code>SectionList</code> 被 <code>ScrollView</code> 包裹的时候，当<code>ScrollView</code>出现滚动条会导致内部的长列表滚动条不出现,当<code>ScrollViw</code>包裹<code>ScrollView</code>的时候一样会导致内部<code>ScrollView</code>卡住。</p>
<h3 id="ReactNative-Task-app-processDebugResources-FAILED"><a href="#ReactNative-Task-app-processDebugResources-FAILED" class="headerlink" title="ReactNative Task :app:processDebugResources FAILED"></a>ReactNative Task :app:processDebugResources FAILED</h3><p>报错：ReactNative Task :app:processDebugResources FAILED FAILURE: Build failed with an exception. What went wrong: Execution failed for task ‘:app:processDebugResources’. java.io.IOException</p>
<p><strong>解决方法：在window的环境下，打开cmd执行 <code>cd android</code>然后执行<code>gradlew clean</code></strong></p>
<h3 id="底部导航按钮点击有问题，"><a href="#底部导航按钮点击有问题，" class="headerlink" title="底部导航按钮点击有问题，"></a>底部导航按钮点击有问题，</h3><p>底部导航出现点击面小的问题，底部高50 但是点击字体和ico都没啥反应，只有点击字体底部大概那么一小点才有反应；可能是打包解析有问题。</p>
<p><strong>解决方法：使用自定义tabBar定义，或者等tabBar解析成功后可以去除tabBar，</strong></p>
<h3 id="Task-app-compileDebugJavaWithJavac-FAILED"><a href="#Task-app-compileDebugJavaWithJavac-FAILED" class="headerlink" title="Task :app:compileDebugJavaWithJavac FAILED"></a>Task :app:compileDebugJavaWithJavac FAILED</h3><p>安装一些第三方库的时候，会需要用到原生组件，然后当你在没有取消链接的情况下，卸载该库会导致打包出错。正确做法应该是先取消链接，在卸载第三方库包；<code>npx react-native unlink xxx</code> <code>npm uninstall xxx</code></p>
<p>如果未按正确取消链接，请打开 ./android/settings.gradle 文件,删除该库引用，例如</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">include &#x27;:react-native-xxx&#x27; //Your library name</span><br><span class="line">project(&#x27;:react-native-xxx&#x27;).projectDir = new File(rootProject.projectDir, &#x27;../node_modules/react-native-abc/android-exoplayer&#x27;)</span><br></pre></td></tr></table></figure>

<p>打开 ./android/app/src/main/java/com/xxx/MainApplication.java 文件,删除该库引用</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import com.github.wuxudong.rncharts.abc;</span><br></pre></td></tr></table></figure>

<p>如果找不到要删除的包名称，或者不知道哪里出错了，可以执行以下代码，查看具体报错</p>
<p><code>cd android</code> &amp;&amp; <code>gradlew clean</code> &amp;&amp; <code>gradlew :app:bundleRelease</code></p>
  </article>
  <aside class="table-content" id="site-toc">
  <div class="table-content-title">
    <i class="fa fa-arrow-right fa-lg" id="site-toc-hide-btn"></i>
    <span>目录</span>
  </div>
  <div class="table-content-main">
    <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%9E%E6%8E%A5%E6%89%8B%E6%9C%BA%E5%AE%89%E8%A3%85"><span class="toc-text">连接手机安装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%9E%E6%8E%A5%E6%89%8B%E6%9C%BA%E8%B0%83%E8%AF%95"><span class="toc-text">连接手机调试</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%9A%E8%BF%87USB%E8%AE%BF%E9%97%AE%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-text">通过USB访问服务器</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%9A%E8%BF%87WIFI%E8%AE%BF%E9%97%AE%E6%9C%8D%E5%8A%A1%E5%99%A8"><span class="toc-text">通过WIFI访问服务器</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA%E9%85%8D%E7%BD%AE"><span class="toc-text">路由导航配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E9%85%8D%E7%BD%AE"><span class="toc-text">本地存储配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B8%B2%E6%9F%93HTML%E9%A1%B5%E9%9D%A2"><span class="toc-text">渲染HTML页面</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#RN-%E7%9A%84UI%E6%8E%A7%E4%BB%B6"><span class="toc-text">RN 的UI控件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%80%E5%8F%91%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98"><span class="toc-text">开发中遇到的问题</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%BD%91%E7%BB%9C%E5%9B%BE%E7%89%87%E4%B8%8D%E6%98%BE%E7%A4%BA"><span class="toc-text">网络图片不显示</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#FlatList-%E5%92%8CSectionList-%E5%8D%A1%E4%BD%8F"><span class="toc-text">FlatList 和SectionList 卡住</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#ReactNative-Task-app-processDebugResources-FAILED"><span class="toc-text">ReactNative Task :app:processDebugResources FAILED</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%BA%95%E9%83%A8%E5%AF%BC%E8%88%AA%E6%8C%89%E9%92%AE%E7%82%B9%E5%87%BB%E6%9C%89%E9%97%AE%E9%A2%98%EF%BC%8C"><span class="toc-text">底部导航按钮点击有问题，</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#Task-app-compileDebugJavaWithJavac-FAILED"><span class="toc-text">Task :app:compileDebugJavaWithJavac FAILED</span></a></li></ol></li></ol>
  </div>
</aside>

  
  
    <aside class="passage-copyright">
      <div>本文作者: 饿包子</div>
      
        <div>
          原文链接: 
          <a href="" target="_blank">https://lixianbin1.github.io/blog/2020/11/19/ReactNative%20%E4%B9%8B%E5%BC%80%E5%8F%91%E9%85%8D%E7%BD%AE/</a>
        </div>
      
      <div>
        版权声明: 本博客所有文章除特别声明外, 均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议. 转载请注明出处!
      </div>
    </aside>
  
  
    <div class="passage-tags">
     
      <a href="/blog/tags/react-native/"><i class="fa fa-tags"></i>react-native</a>
    
    </div>
  
</div>

    </main>
    
    
<div class="site-footer-wrapper">
<!--
  <div class="footer-top">
    <a class="left" href="/blog/2020/12/09/%E5%8F%91%E5%B8%83%E5%92%8C%E7%BB%B4%E6%8A%A4%E5%B1%9E%E4%BA%8E%E8%87%AA%E5%B7%B1%E7%9A%84NPM%E5%8C%85/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a class="right" href="/blog/2020/11/13/%E3%80%90%E6%B8%B8%E6%88%8F%E6%94%BB%E7%95%A5%E3%80%91%E5%AE%9D%E5%8F%AF%E6%A2%A6%E5%89%91%E7%9B%BE/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
  </div>
-->
  <footer class="site-footer">
    
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">网站推荐</h5>
          
            <span class="site-footer-item">
              <a href="https://tympanus.net/codrops/" target="_blank">Codrops</a>
            </span>
          
            <span class="site-footer-item">
              <a href="http://taobaofed.org/" target="_blank">淘宝前端团队(FED)</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">文档教程</h5>
          
            <span class="site-footer-item">
              <a href="https://es6.ruanyifeng.com/" target="_blank">ES6入门</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://developer.mozilla.org/zh-CN/docs/Web" target="_blank">MDN Web文档</a>
            </span>
          
        </div>
      
        <div class="site-footer-col">
          <h5 class="site-footer-title">兴趣前沿</h5>
          
            <span class="site-footer-item">
              <a href="https://threejs.org/" target="_blank">threejs</a>
            </span>
          
            <span class="site-footer-item">
              <a href="https://github.com/justadudewhohacks/face-api.js" target="_blank">face-api</a>
            </span>
          
        </div>
      
    
    <div class="site-footer-info">
      <i class="fa fa-clock-o"></i> 本站已稳定运行<span id="site-time"></span>
    </div>
    
      <div class="site-footer-info">
        <i class="fa fa-paw"></i> 您是本站第 <span id="site-count"></span> 位访客
      </div>
    
    
      <div class="site-footer-info">
        <i class="fa fa-at"></i> Email: xianbin.me@qq.com
      </div>
    
<!--     <div class="site-footer-info">
      <i class="fa fa-copyright"></i> 
      2019 <a href="https://github.com/dongyuanxin/theme-ad/" target="_blank">Theme-AD</a>.
      Created by <a href="https://godbmw.com/" target="_blank">GodBMW</a>.
      All rights reserved.
    </div> -->
  </footer>
</div>
    <div id="site-layer" style="display:none;">
  <div class="site-layer-content">
    <div class="site-layer-header">
      <span class="site-layer-header-title" id="site-layer-title"></span>
      <i class="fa fa-close" id="site-layer-close"></i>
    </div>
    <div class="site-layer-body" id="site-layer-container">
      <div class="site-layer-input" id="site-layer-search" style="display: none;">
        <input type="text">
        <i class="fa fa-search"></i>
      </div>
      
        <div class="site-layer-reward" id="site-layer-reward" style="display: none;">
          
            <div>
              <img src="/blog/images/wechat.png" alt="WeChat">
              
                <p>WeChat</p>
              
            </div>
          
            <div>
              <img src="/blog/images/alipay.png" alt="AliPay">
              
                <p>AliPay</p>
              
            </div>
          
        </div>
      
      <div id="site-layer-welcome" style="display:none;"></div>
    </div>
  </div>
</div>
    

<div class="bottom-bar">

  <div class="bottom-bar-left">
<!--
    <a href="/blog/2020/12/09/%E5%8F%91%E5%B8%83%E5%92%8C%E7%BB%B4%E6%8A%A4%E5%B1%9E%E4%BA%8E%E8%87%AA%E5%B7%B1%E7%9A%84NPM%E5%8C%85/" data-enable="true">
      <i class="fa fa-arrow-left"></i>
    </a>
    <a href="/blog/2020/11/13/%E3%80%90%E6%B8%B8%E6%88%8F%E6%94%BB%E7%95%A5%E3%80%91%E5%AE%9D%E5%8F%AF%E6%A2%A6%E5%89%91%E7%9B%BE/" data-enable="true">
      <i class="fa fa-arrow-right"></i>
    </a>
-->
  </div>

  
  
  
  <div class="bottom-bar-right">
    <a href="javascript:void(0);" data-enable="true" id="site-toc-show-btn">
      <i class="fa fa-bars"></i>
    </a>
    
      <a href="#site-comment" data-enable="true">
        <i class="fa fa-commenting"></i>
      </a>
    
    <a href="javascript:void(0);" id="site-toggle-share-btn">
      <i class="fa fa-share-alt"></i>
    </a>
    
    <a href="javascript:void(0);" id="back-top-btn">
      <i class="fa fa-chevron-up"></i>
    </a>
  </div>
</div>
    <div id="share-btn">
  
  
  
    <a id="share-btn-weibo" href="javascript:void(0);" target="_blank">
      <i class="fa fa-weibo"></i>
    </a>
  
  
    <a id="share-btn-qq" href="javascript:void(0);" target="_blank">
      <i class="fa fa-qq"></i>
    </a>
  
  
</div>
    





    
  </body>
</html>